import React, { Component } from 'react'
import Home from './Home'
import ThemeContext from './context/theme-context'
import UserContext from './context/user-context'
import Profile from './Profile'

export class App extends Component {
  constructor() {
    super()
    this.state = {
      info: { name: 'kobe', age: 18 },
    }
  }

  render() {
    const { info } = this.state

    return (
      <div>
        <h2>App</h2>
        {/* 1.给home传递数据 */}
        {/* <Home name="zs" age="18" />
        <Home {...info} /> */}
        {/* 2.普通的home */}
        {/* 第二步：通过ThemeContext.Provider中的value属性为后代提供数据 */}
        {/* <ThemeContext.Provider value={{ color: 'red', size: '30' }}>
          <Home {...info} />
        </ThemeContext.Provider> */}
        <UserContext.Provider value={{ nickname: 'kobe', age: 30 }}>
          <ThemeContext.Provider value={{ color: 'red', size: '30' }}>
            <Home {...info} />
          </ThemeContext.Provider>
        </UserContext.Provider>

        {/* 不在context中，但是却像获取到context中的数据 */}
        <Profile />
      </div>
    )
  }
}

export default App
